import { Text, View } from "@tarojs/components";
import ByCol from "../ui/ByCol";
import ByIcon from "../ui/ByIcon";
import ByRow from "../ui/ByRow";
import ByAvatar from "../ui/ByAvatar";
import { Worker, Supplier, UserInfo } from "@/types/work";

// 工人
export const OptionWorker = ({
  source,

  checked,
  border = true,
  onClick,
}: {
  source: Worker;
  checked?: boolean;

  border?: boolean;
  onClick?: () => void;
}) => {
  return (
    <ByRow align="center" onClick={onClick}>
      <ByIcon
        size={36}
        name={checked ? "CheckFill" : "UnChecked"}
        className={checked ? "text-primary" : "text-third"}
      />

      <ByCol
        span={"auto"}
        className={`py-2 ml-3 border-line-light ${border && "border-t"}`}
      >
        <ByRow align="center">
          <ByAvatar
            alt={source.workerName}
            className="bg-primary text-sm text-white"
            circle={false}
          />
          <ByCol span={"auto"} className="pl-2">
            <Text>{source.workerName}</Text>
            <View className="mt-1 text-xs text-third">{source.workerType}</View>
          </ByCol>
        </ByRow>
      </ByCol>
    </ByRow>
  );
};

// 供应商
export const OptionSuplier = ({
  source,
  checked,
  border,
  onClick,
}: {
  border?: boolean;
  checked?: boolean;
  source: Supplier;

  onClick?: () => void;
}) => {
  return (
    <ByRow align="center" onClick={onClick}>
      <ByIcon
        size={36}
        name={checked ? "CheckFill" : "UnChecked"}
        className={checked ? "text-primary" : "text-third"}
      />

      <ByCol
        span={"auto"}
        className={`py-2 ml-3 border-line-light ${border && "border-t"}`}
      >
        <View className="pl-2">
          <Text>{source.supplyName}</Text>
          <View className="mt-1 text-xs text-third">{source.supplyCode}</View>
        </View>
      </ByCol>
    </ByRow>
  );
};

// 用户
export const OptionMember = ({
  source,
  checked,
  border,
  onClick,
}: {
  border?: boolean;
  checked?: boolean;
  source: UserInfo;

  onClick?: () => void;
}) => {
  return (
    <ByRow align="center" onClick={onClick}>
      <ByIcon
        size={36}
        name={checked ? "CheckFill" : "UnChecked"}
        className={checked ? "text-primary" : "text-third"}
      />

      <ByCol
        span={"auto"}
        className={`py-2 ml-3 border-line-light ${border && "border-t"}`}
      >
        <ByRow align="center">
          <ByAvatar
            alt={source.user_name}
            className="bg-primary text-sm text-white"
            circle={false}
          />
          <ByCol span={"auto"} className="pl-2">
            <Text>{source.user_name}</Text>
            <View className="mt-1 text-xs text-third">{source.role_names}</View>
          </ByCol>
        </ByRow>
      </ByCol>
    </ByRow>
  );
};

// 项目成员
export const OptionProjectMember = ({
  source,
  checked,
  border,
  onClick,
}: {
  border?: boolean;
  checked?: boolean;
  source: Supplier;

  onClick?: () => void;
}) => {
  return (
    <ByRow align="center" onClick={onClick}>
      <ByIcon
        size={36}
        name={checked ? "CheckFill" : "UnChecked"}
        className={checked ? "text-primary" : "text-third"}
      />

      <ByCol
        span={"auto"}
        className={`py-2 ml-3 border-line-light ${border && "border-t"}`}
      >
        <ByRow align="center">
          <ByCol span={"none"}>
            <ByAvatar alt={source.userName} className="bg-primary" />
          </ByCol>

          <ByCol span={"auto"} className="pl-2">
            <Text>{source.userName}</Text>
            <View className="mt-1 text-xs text-third">{source.postName}</View>
          </ByCol>
        </ByRow>
      </ByCol>
    </ByRow>
  );
};
